<template>
    <el-dialog
      v-model="isShow"
      :title="title"
      width="800"
      :close-on-click-modal="false"
      @close="handleClose"
    >
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="卡" prop="cardId">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.cardId, optionData.cardList)}}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="用户" prop="userId"/> -->
          <el-table-column label="有效期" prop="durationValue" width="240">
            <template #default="scope">
              {{ scope.row.startDate }}~{{ scope.row.endDate }}
            </template>
          </el-table-column>
          <el-table-column label="购买日期" prop="purchaseDate"/>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.status, optionData.membershipsStatus)}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageData.current"
          :page-size="pageData.size"
          :page-sizes="pageData.pageSizes"
          :total="pageData.total"
          background
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="sizeChange"
        />
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import {ElMessage, ElMessageBox} from 'element-plus'
  import { ref, reactive, inject, getCurrentInstance, ComponentInternalInstance } from 'vue';
  const {proxy} = getCurrentInstance() as ComponentInternalInstance;
  let obj = {
  pageApi: '/admin/userMemberships/page',
  deleteApi: '/admin/userMemberships',
  primaryKey: 'membershipId',
  searchFixed:{},
}
import { useList } from '/@/assets/compositionFn/list';
let { dlgAddEdit, tableData, pageData, optionDataStore, getList, handleSearch, sizeChange, selectCheckbox, setDefaultCheckbox, handleOperate, handleDelete, handleDeleteMultiple, handleExport } = useList(obj);

  let isShow = ref(false);
  let title = ref('购卡记录');
  let row:any = ref({});
let optionData:any = reactive({});

  const init = (data:any) => {
    row.value = data;
    obj.searchFixed.userId = data;
    isShow.value = true;
    getInitData();
  };
  const getInitData = async ()=>{
  optionData.yesnoType = await optionDataStore.getDictList('yes_no_type');
  optionData.membershipsStatus = await optionDataStore.getDictList('memberships_status');
  let cardList = await proxy.$request('get', '/admin/membershipCards/page', {current:1, size:30})
  optionData.cardList = proxy.$util.transformArray(cardList.records, 'cardId', 'cardName');
  getList()
};
  const handleClose = () => {
    
  }
  
  defineExpose({
    init,
  })
  </script>
  
  <style>
  
  </style>